<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            background-color: black;
            color: #fff;
            margin: 100px auto;
            display: inline-block;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div class="hours">小时</div>
    <div class="minter">分钟</div>
    <div class="seconds">毫秒</div>
    <script>
        let hours = document.querySelector('.hours');
        let minter = document.querySelector('.minter');
        let seconds = document.querySelector('.seconds');
        let per = +new Date('2021-4-11 20:40:00');//返回用户输入时间的总毫秒书
        fn();
        function fn(){//
            let timer = +new Date();//返回当前时间的总毫秒
            let times = (per -  timer) / 1000;//返回剩余时间的总毫
            let h = parseInt(times / 60 / 60 % 24);//时
            h = h < 10 ? '0' + h:h;
            hours.innerHTML =h;
            let m = parseInt(times / 60 % 60);//分
            m = m < 10 ? '0'+ m:m;
            minter.innerHTML =m;
            console.log(m);
            let s = parseInt(times % 60 );
            s = s < 10 ? '0'+ s:s; 
            seconds.innerHTML = s;
            //获取当前时间定时器每隔一秒调用
            // let timer = +new Date()
            // let ho = timer.getHours();
            // ho = ho < 10 ? '0'+ho:ho;
            // let mi = timer.getMinutes();
            // mi = mi < 10 ? '0'+mi:mi;
            // let se = timer.getSeconds();
            // se = se < 10 ? '0'+se:se
            // h.innerHTML = ho;
            // m.innerHTML = mi;
            // s.innerHTML = se;
        }
        setInterval(fn,1000);
    </script>
</body>
</html>